<!--Coming（即将上映）-->
<template>
    <div class="">
        <div class="line"><span>即将上映</span></div>
        <ul class="m-list m-yb">
            <li v-for="coming in soonList">
                <router-link :to="{name: 'detail', params :{'id':coming.id } }">
                    <img :src="coming.cover.origin" alt="">
                    <div class="list-box">
                        <div class="left">
                            <p class="titl" v-text="coming.name"></p>
                        </div>
                        <div class="right" >{{coming.premiereAt | formatDate}}</div>
                    </div>
                </router-link> 
            </li>
            
        </ul>
        <div class="more-button">更多即将上映电影</div>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        
        data: function () {
            return {
                soonList : []
            }
        },
        filters:{
            'formatDate':function(val){
                var time = new Date(val);
                var m    = time.getMonth() +1;
                var d    = time.getDate();
                return m + '月' + d + '日上映';
            }
        },
        mounted:function () {
            var url  = 'http://localhost:3000/coming?time=' + new Date().getTime();
            var that = this;
            $.get(url,function(res){
                
                that.soonList = res.data.films;
                setTimeout(function() {
                    that.$parent.isMark = false;
                }, 30)
            })
        }
    }
</script>